<extend name="Public/main" />

<block name="content">
    <div style="position:relative;margin-bottom:.1rem;">
        <div class="m-slider" id="J_Slider">
            <!--banner 图片轮播 -->
            <div class="slider-wrapper">
                <volist name="banner" id="vo">
                    <div class="slider-item">
                        <a href="{$vo.url|default='javascript:void(0);'}">
                            <img src="{$vo.img}">
                        </a>
                    </div>
                </volist>
            </div>
            <div class="slider-pagination"></div><!-- 分页标识 -->
        </div>
        <div class="user-info">
            <a href="javascript:void(0);">
                <img class="user-avatar" src="{$user.avatar|default='__IMG__/default.png'}" />
            </a>
            <div>
                <h1>{$user.nick_name|default='无名氏'}</h1>
                <p>ID:{$user.id|default='获取失败'}</p>
            </div>
        </div>
    </div>
    <!-- 礼包列表 -->
    <div class="m-list-title"><i class="icon-gift"></i> 礼包列表</div>
    <section id="J_List">
        <ul id="J_ListContent" class="m-list list-theme4"></ul>
    </section>
</block>


<block name="footer">
    <footer class="m-tabbar tabbar-fixed" >

        <a href="{:U('Index/index')}" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-game"></i>
            </span>
            <span class="tabbar-txt">游戏</span>
        </a>
        <a href="javascript:void(0);" class="tabbar-item tabbar-active">
            <span class="tabbar-icon">
                <i class="icon-gift"></i>
            </span>
            <span class="tabbar-txt">礼包</span>
        </a>
        <a href="{:U('Player/index')}" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-ucenter-outline"></i>
            </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>
</block>

<block name="script">
    <!-- 引入Template 脚本-->
    <script src="__JS__/template.js"></script>

    <script id="J_ListHtml" type="text/html">
        {{each list as data i}}
        <li class="list-item">
            <div class="list-img">
                <img class="lazy"  data-url="{{data.img}}" >
            </div>
            <div class="list-mes J_Progress">
                <h3 class="list-title">{{data.title}}</h3>
                <div class="list-mes-item">
                    <p class="">
                        {{data.subtitle}}
                    </p>
                </div>
                <div class="list-mes-item">
                    <div style="width: 70%;  height: .25rem;border-radius: 5px; overflow: hidden;" class="progress-bar J_bar" data-percent="{{data.percent}}">
                        <div class="progressbar-content">剩余：{{data.percent}}%</div>
                    </div>
                </div>

                <div class="boo-fr">
                    <a href="javascript:void(0);" class="btn btn-xs btn-primary J_get_code" data-page="{{list.page}}" data-gift="{{data.gift}}">
                        <i class="icon-checkoff"></i> 领取
                    </a>
                </div>
            </div>
        </li>
        {{/each}}
    </script>
    <script>
        !function ($) {
            $('#J_Slider').slider({
                speed: 200,
                autoplay: 2000,
                lazyLoad: true
            });

            var page = 1, pageSize = 5;
            var dialog= YDUI.dialog;
            var loadMore = function (callback) {
                $.ajax({
                    url: '{:U("Gift/giftList")}',
                    dataType: 'json',
                    data: {
                        page: page,
                        pagesize: pageSize
                    },
                    success: function (ret) {console.log('----------');console.log(ret);
                        typeof callback == 'function' && callback(ret);
                    },error : function(ex) {console.log('===========');
                        console.log(ex);
                        alert('网络错误');
                    }
                });
            };

            $('#J_List').infiniteScroll({
                pageSize: pageSize,
                initLoad: true,
                backposition: false,
                jumpLink: '.J_Link',
                loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/><br />正在加载',
                doneTxt : '<img src="__IMG__/logo.png"/><br />我赞技术提供技术支持',
                loadListFn: function () {
                    var def = $.Deferred();
                    loadMore(function (listArr) {
                        var html = template('J_ListHtml', {list: listArr});
                        $('#J_ListContent').append(html);
                        $('img.lazy').lazyLoad({attr:'data-url'});
                        console.log(listArr);
                        $('.J_bar').each(function(){
                            var por = YDUI.util.calc($(this).attr('data-percent'),'/',100);
                            console.log(por);
                            $(this).progressBar({
                                type: 'line',
                                strokeWidth: 5,
                                strokeColor: '#B2B2B2',
                                trailWidth: 5,
                                trailColor: '#00b9ff',
                                fill: '#FFF',
                                progress: por
                            });
                        });
                        //加载中提示框
                        $('.J_get_code').on('click', function () {
                            dialog.loading.open('奋力领取中。。。');
                            var gift = $(this).attr('data-gift');
                            $.ajax({
                                'url' : "{:U('Gift/getCode')}",
                                type:'post',
                                data:{gift:gift},
                                success:function(res){
                                    dialog.loading.close();
                                    try{
                                        if (res.status == 1) {
                                            dialog.alert('恭喜你抢到兑换码：<br /><span class="badge-primary">' + res.info +'</span> （长按可复制)');
                                        }else if(res.status == 2){
                                            dialog.alert('<div style="text-align: center;"><img style="width:50%;margin-left:25%;" src="__IMG__/code.jpg"/><br />'+res.info+'</div>');
                                        }else {
                                            dialog.alert(res.info);
                                        }
                                    }catch (ex) {
                                        dialog.alert('服务器错误');
                                    }
                                    console.log(res);
                                }, error :function(ex){
                                    dialog.loading.close();
                                    dialog.alert('网络错误');
                                }
                            });
                        });

                        setTimeout(function(){
                            $('img.lazy').removeClass('lazy');
                            $('.J_bar').removeClass('J_bar');
                            $('.J_get_code').removeClass('J_get_code');
                        },500);
                        def.resolve(listArr);
                        ++page;
                    });

                    return def.promise();
                }
            });
        }(jQuery);
    </script>
</block>